<style type="text/css">
    .form-box {
        padding: 20px 20px 0 20px;
    }
</style>

<div id="layui-container" class="layui-anim layui-anim-downbit">
    <table class="layui-hide" id="data-table" lay-filter="dataTable"></table>
</div>

<script type="text/html" id="instance-form-detail">
    <div class="form-box">
        <form class="layui-form">
            {{# layui.each(d.list, function(index, item) { }}
            <div class="layui-form-item">
                <label class="layui-form-label">{{ item.name }}</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" readonly value="{{ item.value }}">
                </div>
            </div>
            {{# }); }}
        </form>
    </div>
</script>

<script type="text/html" id="instance-node-detail">
    <div class="form-box">
        <ul class="layui-timeline">
            {{# layui.each(d.list, function(index, item) { }}
            <!-- 条件路由节点不显示 -->
            {{# if(item.nodeType !== 'conditionRouteNode') { }}
            <!-- 抄送人节点 -->
            {{# if(item.nodeType === 'notifierNode') { }}
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <p class="layui-timeline-title">{{ item.nodeName }}</p>
                    {{# layui.each(item.approvers, function(index, itemApproval) { }}
                    <p>{{ itemApproval.approverName }} - {{ itemApproval.alreadyNotify ? '已抄送' : '未抄送' }}</p>
                    {{# }); }}
                </div>
            </li>
            {{# } else if(item.nodeType === 'startNode') { }}
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <p class="layui-timeline-title">{{ item.nodeName }}</p>
                    {{# layui.each(item.approvers, function(index, itemApproval) { }}
                    <p>发起人: {{ itemApproval.approverName }}</p>
                    {{# }); }}
                </div>
            </li>
            {{# } else { }}
            <li class="layui-timeline-item">
                {{# if(item.currentFlag) { }}
                <i class="layui-icon layui-timeline-axis">&#xe617;</i>
                {{# } else { }}
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                {{# } }}
                <div class="layui-timeline-content layui-text">
                    <p class="layui-timeline-title">{{ item.nodeName }}</p>
                    {{# layui.each(item.approvers, function(index, itemApproval) { }}
                    <p>
                        {{ itemApproval.approverName }} - {{ itemApproval.auditResult === 'pass' ? '<i
                            class="layui-icon layui-icon-ok"></i>' : '<i class="layui-icon layui-icon-close"></i>' }} {{
                        itemApproval.auditOpinion || '' }}
                    </p>
                    {{# }); }}
                </div>
            </li>
            {{# } }}
            {{# } }}
            {{# }); }}
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">流程结束</div>
                </div>
            </li>
        </ul>
    </div>
</script>

<script type="text/html" id="tablebarDemo">
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="instanceDetail">实例表单</button>
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="instanceNodeDetail">节点详情</button>
</script>

<script type="text/javascript">
    layui.use(['form', 'table', 'laytpl', 'util'], function () {
        let form = layui.form;
        let table = layui.table;
        let util = layui.util;
        let laytpl = layui.laytpl;

        let tableIns = table.render({
            elem: '#data-table',
            url: api.pageInstances,
            method: 'post',
            contentType: 'application/json',
            //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cellMinWidth: 80,
            page: true,
            limit: 15,
            limits: [15, 30, 45, 60],
            cols: [[
                {type: "checkbox", width: 50},
                {field: '', title: '序号', type: 'numbers'},
                {field: 'id', title: '流程实例ID', width: 180},
                {field: 'instanceName', title: '流程实例名称', width: 200},
                {field: 'launchName', title: '发起人'},
                {field: 'currentNodeId', title: '流程节点ID', width: 180},
                {field: 'currentFrontNodeId', title: '当前节点ID', width: 180},
                {field: 'currentApprovalNames', title: '当前节点审批人'},
                {field: 'flowStatus', title: '流程状态'},
                {field: 'createTime', title: '创建时间'},
                {field: '', width: 160, title: '操作', templet: '#tablebarDemo'}
            ]],
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            },
            toolbar: '#toolbarDemo'
        });

        let active = {
            instanceDetail: function (data) {
                let loadingIndex = layer.load();
                request.bodyAjax(api.instanceDetail, {id: data.id}, function (res) {
                    if (res.success) {
                        layer.close(loadingIndex);
                        let instanceObj = res.data;
                        let formInstanceStr = instanceObj.formInfo;
                        let formInfo = JSON.parse(formInstanceStr);

                        let tpl = document.getElementById("instance-form-detail").innerHTML;
                        laytpl(tpl).render(formInfo, function (html) {
                            layer.open({
                                type: 1,
                                content: html,
                                title: '表单详情',
                                area: ['435px', '300px'],
                                maxmin: false,
                                shade: 0.3,
                                btn: ['确定', '取消'],
                                yes: function (index, layero) {
                                    layer.close(index);
                                    return false;
                                }
                            });
                        });
                        return form.render();
                    }
                });
            },
            instanceNodeDetail: function (data) {
                let loadingIndex = layer.load();
                request.bodyAjax(api.instanceNodeDetail, {id: data.id}, function (res) {
                    if (res.success) {
                        layer.close(loadingIndex);
                        let tpl = document.getElementById("instance-node-detail").innerHTML;
                        laytpl(tpl).render({list: res.data}, function (html) {
                            layer.open({
                                type: 1,
                                content: html,
                                title: '流程实例节点详情',
                                area: ['335px', '700px'],
                                maxmin: false,
                                shade: 0.3,
                                btn: ['确定', '取消'],
                                yes: function (index, layero) {
                                    layer.close(index);
                                    return false;
                                }
                            });
                        });
                    }
                });
            }
        };

        // layui的btn单独添加点击事件
        util.event('lay-active', active);

        // 表头按钮
        table.on('toolbar(dataTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (active[obj.event]) {
                active[obj.event](obj);
            }
        });

        // 操作列
        table.on('tool(dataTable)', function (obj) {
            let layEvent = obj.event;
            let action = active[layEvent];
            if (action) {
                action(obj.data);
            }
        });

    });

</script>
